Setelah memahami cara kerja heading untuk membangun hierarki judul, langkah berikutnya adalah menguasai cara mengelola teks di dalam bagian konten itu sendiri. Sebagian besar konten sebuah halaman web bukan terdiri dari judul, melainkan dari teks penjelasan, narasi, deskripsi, dan uraian yang disusun dalam bentuk paragraf. HTML menyediakan seperangkat elemen yang dirancang khusus untuk keperluan ini: elemen <p> untuk membungkus paragraf, elemen <br> untuk memaksa baris baru di dalam teks yang mengalir, elemen <strong> untuk memberi penekanan kuat pada kata atau frasa tertentu, elemen <em> untuk memberi penekanan dengan intonasi, dan elemen <span> sebagai wadah inline yang netral untuk keperluan penargetan CSS dan JavaScript. Kelima elemen ini adalah yang paling sering Anda gunakan ketika menulis konten teks dalam HTML, dan memahami perbedaan semantik di antara keduanya adalah hal yang membedakan penulisan HTML yang benar dari penulisan HTML yang hanya "terlihat benar" secara visual. Artikel ini akan membahas setiap elemen secara mendalam, menjelaskan kapan menggunakannya, kapan tidak menggunakannya, dan bagaimana menggabungkannya dalam satu dokumen yang strukturnya logis dan semantiknya tepat.
Sebelum masuk ke pembahasan teknis, penting untuk menegaskan satu prinsip yang menjadi benang merah seluruh artikel ini: dalam HTML, tampilan visual dan makna semantik adalah dua hal yang berbeda dan harus diperlakukan secara terpisah. Elemen <strong> memang secara bawaan menampilkan teks tebal di browser, namun fungsi utamanya bukan "membuat teks tebal". Fungsi utamanya adalah menyatakan bahwa teks tersebut memiliki kepentingan yang lebih tinggi dibandingkan teks di sekitarnya. Tampilan tebal hanyalah representasi visual default dari kepentingan tersebut. Demikian pula, elemen <em> bukan "elemen untuk membuat teks miring" melainkan elemen untuk memberikan penekanan dengan intonasi pada teks. Jika yang Anda butuhkan hanyalah teks tebal atau miring secara visual tanpa makna semantik tambahan, CSS adalah alat yang tepat untuk itu, bukan elemen HTML. Pemahaman prinsip ini akan membuat Anda menulis HTML yang bermakna, bukan sekadar HTML yang terlihat bagus di layar. Artikel ini menggunakan VS Code dan Google Chrome sebagai alat praktik.
Landasan Sains dan Prinsip Kerja Metode
Elemen <p> adalah elemen blok yang memberikan konteks paragraf pada teks yang ada di dalamnya. Ketika browser menemukan elemen <p>, ia menciptakan sebuah blok konten yang memiliki margin vertikal bawaan di atas dan di bawahnya, memisahkan paragraf tersebut secara visual dari konten di sekitarnya. Perilaku ini terjadi melalui user agent stylesheet yang telah dibahas sebelumnya. Yang sangat penting untuk dipahami adalah bagaimana browser menangani whitespace di dalam elemen <p>. Jika Anda menulis teks dengan banyak spasi berurutan atau baris baru di dalam elemen <p> di VS Code, browser akan mengkompresnya menjadi satu spasi tunggal saat ditampilkan. Ini berarti menekan Enter berkali kali di dalam teks di text editor Anda tidak akan menghasilkan baris baru di browser. Browser hanya memperhatikan markup HTML, bukan whitespace di dalam kode sumber. Perilaku ini disebut sebagai "whitespace collapsing" dan merupakan bagian dari spesifikasi HTML yang berlaku untuk semua elemen HTML kecuali elemen <pre> yang memang dirancang untuk mempertahankan whitespace asli.
Elemen <strong> dan <em> keduanya adalah elemen inline dengan semantik yang berbeda namun sering disalahpahami sebagai elemen yang sekadar mengubah penampilan teks. Spesifikasi HTML5 mendefinisikan <strong> sebagai elemen yang mewakili "kepentingan kuat" atau "urgensi" atau "keseriusan" pada kontennya. Ini berbeda dari sekadar penekanan. Kata "Peringatan: jangan sentuh kabel ini" akan menggunakan <strong> pada kata "Peringatan" karena kata itu mengandung urgensi keselamatan yang tinggi. Sementara <em> mewakili penekanan yang mengubah makna kalimat jika penekanannya bergeser, mirip seperti cara manusia memberikan intonasi lebih pada kata tertentu saat berbicara. Kalimat "Saya tidak pernah bilang dia mengambilnya" memiliki makna yang berbeda tergantung pada kata mana yang mendapat penekanan. Screen reader menggunakan informasi semantik dari kedua elemen ini untuk mengatur cara membacakan teks kepada pengguna dengan keterbatasan penglihatan, memberikan nada yang berbeda pada teks yang dibungkus <em> dibandingkan teks biasa.
Elemen <span> adalah elemen inline yang sepenuhnya netral secara semantik. Ia tidak membawa makna apapun, tidak mengubah tampilan apapun secara bawaan, dan tidak memengaruhi cara browser atau screen reader memproses kontennya. Satu satunya tujuan keberadaan <span> adalah menyediakan "kait" yang bisa ditargetkan oleh CSS melalui atribut class atau oleh JavaScript melalui atribut id dan class. Ini menjadikan <span> sebagai elemen yang sangat berguna ketika Anda perlu memberikan gaya visual atau perilaku tertentu pada sebagian teks di dalam paragraf tanpa menambahkan makna semantik apapun. Analoginya adalah <div> yang merupakan elemen blok netral, sementara <span> adalah padanan inlinenya. Keduanya tidak memiliki makna semantik bawaan dan sepenuhnya bergantung pada konteks penggunaannya. Memahami kapan menggunakan <span> versus <strong> atau <em> adalah cerminan langsung dari pemahaman Anda tentang prinsip pemisahan antara struktur semantik dan presentasi visual dalam HTML.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Tabel berikut merangkum spesifikasi teknis kelima elemen pemformatan teks dasar HTML yang dibahas dalam artikel ini. Setiap baris menjelaskan karakteristik elemen, jenis elemennya dalam konteks alur dokumen, dan panduan kapan elemen tersebut harus atau tidak harus digunakan.
| Komponen | Spesifikasi/Karakteristik | Fungsi Teknis dan Panduan Penggunaan |
|---|---|---|
| Elemen p | Elemen blok; memiliki margin atas dan bawah bawaan dari user agent stylesheet; memiliki opening tag dan closing tag | Membungkus satu unit teks yang membentuk satu paragraf; digunakan untuk setiap blok teks narasi atau penjelasan; jangan gunakan untuk teks satu kata atau label pendek |
| Elemen br | Void element (self-closing); elemen inline; tidak memiliki closing tag; tidak menghasilkan margin seperti p | Memaksa baris baru di dalam alur teks tanpa memulai paragraf baru; digunakan untuk baris baris puisi, alamat surat, atau lirik lagu di mana baris baru adalah bagian dari konten itu sendiri |
| Elemen strong | Elemen inline; memiliki opening tag dan closing tag; tampilan bawaan: teks tebal (font-weight: bold) | Menandai teks yang memiliki kepentingan kuat, urgensi, atau keseriusan; digunakan untuk peringatan, kata kunci utama dalam penjelasan, atau bagian yang benar benar krusial untuk dipahami pembaca |
| Elemen em | Elemen inline; memiliki opening tag dan closing tag; tampilan bawaan: teks miring (font-style: italic) | Menandai teks yang mendapat penekanan dengan intonasi sehingga mengubah nuansa atau makna kalimat; digunakan seperti cara seseorang memberi tekanan pada kata tertentu saat berbicara |
| Elemen span | Elemen inline; memiliki opening tag dan closing tag; tidak ada tampilan bawaan; tidak ada semantik bawaan | Wadah inline netral yang digunakan semata mata untuk menargetkan sebagian teks menggunakan CSS atau JavaScript melalui atribut class atau id; gunakan hanya jika tidak ada elemen semantik yang lebih tepat |
| Elemen b (pembanding) | Elemen inline; tampilan bawaan: teks tebal; semantik lebih lemah dari strong | Menandai teks yang perlu dibedakan secara visual namun tanpa urgensi atau kepentingan khusus, misalnya kata kunci dalam ringkasan atau nama produk; berbeda dari strong yang mengandung kepentingan semantik tinggi |
| Elemen i (pembanding) | Elemen inline; tampilan bawaan: teks miring; semantik lebih lemah dari em | Menandai teks dalam konteks alternatif seperti istilah teknis, kata dalam bahasa asing, nama kapal, atau judul karya; berbeda dari em yang mengandung penekanan intonasi |
| Whitespace collapsing | Perilaku parser HTML yang mengompres beberapa spasi dan baris baru menjadi satu spasi tunggal | Berlaku pada semua elemen HTML kecuali pre; berarti baris baru dan spasi berlebih di kode sumber tidak memengaruhi tampilan; gunakan br untuk baris baru eksplisit atau mulai elemen p baru untuk pemisah paragraf |
| Penggabungan strong dan em | Kedua elemen dapat disarangkan: <strong><em>teks</em></strong> menghasilkan teks tebal sekaligus miring | Digunakan ketika teks perlu mendapat penekanan kuat sekaligus penekanan intonasi; urutan nesting tidak memengaruhi hasil visual namun harus ditutup dengan urutan yang benar |
| Atribut class pada span | class="nama-kelas" ditambahkan pada opening tag span untuk menargetkan dengan CSS | Pola paling umum penggunaan span: memberikan class tertentu agar CSS dapat mengubah warna, ukuran, atau gaya teks sebagian kata dalam paragraf tanpa menambahkan makna semantik |
<br> sering disalahgunakan oleh pemula untuk membuat jarak vertikal antara blok konten, misalnya menulis beberapa <br> berturut turut untuk mendorong konten ke bawah. Ini adalah praktik yang salah secara teknis dan semantik. Elemen <br> hanya bermakna sebagai baris baru yang merupakan bagian integral dari konten itu sendiri, seperti dalam puisi atau alamat. Untuk membuat jarak antar blok konten, gunakan elemen <p> yang terpisah atau atur jarak menggunakan properti CSS margin dan padding. Menggunakan beberapa <br> berturut turut untuk jarak adalah sinyal bahwa Anda sedang menggunakan HTML untuk keperluan yang seharusnya ditangani CSS.Panduan Langkah Kerja Bertahap
Membuat File Latihan dan Memahami Perilaku Whitespace dalam Elemen p
Buka VS Code dengan folder belajar-html aktif di panel Explorer. Buat file baru bernama teks-dasar.html dengan mengklik ikon New File di panel Explorer. Langkah pertama ini secara khusus dirancang untuk membangun pemahaman yang benar tentang perilaku whitespace dalam HTML, karena banyak pemula bingung mengapa baris baru yang mereka ketik di VS Code tidak muncul di browser. Memahami whitespace collapsing dari awal akan mencegah kebingungan yang sering muncul saat menulis konten teks panjang.
Ketikkan kode berikut ke dalam file teks-dasar.html. Perhatikan bahwa paragraf pertama ditulis dalam satu baris panjang, sementara paragraf kedua ditulis dengan baris baru di tengah kode sumbernya:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar Tag Paragraf dan Pemformatan Teks</title>
</head>
<body>
<h1>Belajar Paragraf dan Pemformatan Teks HTML</h1>
<p>Ini adalah paragraf pertama yang ditulis dalam satu baris panjang di kode sumber. Browser akan menampilkannya sesuai lebar jendela secara otomatis.</p>
<p>Ini adalah paragraf kedua.
Baris ini ditulis pada baris baru di VS Code.
Baris ini juga ditulis pada baris baru lagi.
Namun browser akan menggabungkan semuanya menjadi satu baris paragraf.</p>
<p>Ini adalah paragraf ketiga. Perhatikan bahwa setiap elemen p dipisahkan oleh jarak vertikal dari elemen p di sekitarnya berkat margin bawaan browser.</p>
</body>
</html>Simpan dengan Ctrl + S lalu buka di Chrome dengan Ctrl + O. Amati hasilnya dengan seksama. Paragraf kedua yang Anda tulis dalam tiga baris di VS Code ditampilkan oleh Chrome sebagai satu paragraf mengalir tanpa baris baru di antara baris baris tersebut. Ini adalah whitespace collapsing bekerja. Juga perhatikan bahwa ketiga paragraf dipisahkan oleh jarak vertikal yang nyaman meskipun Anda tidak menambahkan CSS apapun. Jarak ini berasal dari margin bawaan elemen <p> dalam user agent stylesheet Chrome. Verifikasi: paragraf kedua tampil dalam satu alur meskipun ditulis dalam beberapa baris di kode sumber, dan ketiga paragraf tampil dengan jarak vertikal yang jelas di antara keduanya.
Mempraktikkan Elemen br untuk Baris Baru yang Bermakna
Setelah memahami bahwa baris baru di kode sumber tidak menghasilkan baris baru di browser, kini saatnya mempelajari cara membuat baris baru yang sesungguhnya menggunakan elemen <br>. Pada langkah ini Anda akan menggunakan <br> dalam konteks yang tepat yaitu untuk menulis sebuah alamat surat dan beberapa baris puisi pendek, dua kasus penggunaan yang paling sah untuk elemen ini karena baris baru dalam kedua konteks tersebut adalah bagian dari makna konten itu sendiri, bukan sekadar keinginan visual.
Tambahkan bagian berikut ke dalam <body> file teks-dasar.html tepat sebelum tag penutup </body>:
<h2>Contoh Penggunaan br yang Tepat</h2>
<h3>Format Alamat Surat</h3>
<p>
Kepada Yth.<br>
Direktur Utama PT Maju Bersama<br>
Jalan Sudirman No. 45<br>
Jakarta Pusat 10220
</p>
<h3>Baris Puisi</h3>
<p>
Hujan turun di sore hari<br>
Membasahi bumi yang kering<br>
Petani tersenyum melihatnya<br>
Harapan tumbuh di ladang padi
</p>
<h3>Contoh Penggunaan br yang Salah (Jangan Ditiru)</h3>
<p>Paragraf pertama yang seharusnya dipisah dengan elemen p baru.</p>
<p>Paragraf kedua ini menggunakan elemen p yang benar sebagai pemisah, bukan br berulang.</p>Simpan dan muat ulang Chrome. Perhatikan perbedaan mendasar antara format alamat dan puisi dengan kedua paragraf di bagian bawah. Dalam alamat dan puisi, setiap baris memang merupakan unit konten yang terpisah namun masih merupakan satu kesatuan teks sehingga penggunaan <br> di dalam satu elemen <p> adalah tepat. Pada dua paragraf terakhir, kontennya adalah dua unit pikiran yang benar benar terpisah sehingga menggunakan dua elemen <p> yang berbeda adalah pilihan yang semantiknya lebih tepat. Perhatikan juga bahwa jarak antara dua elemen <p> terlihat lebih besar dari jarak antar baris dalam satu <p> yang dipisahkan <br>, mencerminkan perbedaan tingkat pemisahan konten. Verifikasi: baris dalam alamat dan puisi tampil masing masing di baris sendiri, sementara dua paragraf terakhir tampil dengan jarak vertikal yang lebih besar di antaranya.
Mempraktikkan Elemen strong untuk Penekanan Kepentingan
Elemen <strong> adalah elemen inline yang paling sering digunakan untuk menandai teks yang benar benar penting, mendesak, atau krusial di dalam konteks paragraf. Pada langkah ini Anda akan mempraktikkan penggunaannya dalam tiga konteks yang berbeda: peringatan keselamatan, instruksi langkah kritis, dan penekanan fakta penting dalam artikel informatif. Dengan melihat ketiga konteks ini Anda akan memiliki gambaran yang jelas tentang kapan <strong> memang tepat digunakan dan mengapa penggunaannya harus berdasarkan kepentingan konten, bukan keinginan visual semata.
Tambahkan bagian berikut ke dalam <body> file teks-dasar.html sebelum </body>:
<h2>Contoh Penggunaan Elemen strong</h2>
<h3>Peringatan Keselamatan</h3>
<p>
Sebelum memulai instalasi, <strong>matikan semua sumber daya listrik</strong>
terlebih dahulu. Mengabaikan langkah ini dapat menyebabkan
kecelakaan yang serius.
</p>
<h3>Instruksi Kritis dalam Panduan</h3>
<p>
Masukkan kode verifikasi dalam waktu <strong>kurang dari sepuluh menit</strong>
sejak kode dikirimkan. Kode akan kedaluwarsa setelah batas waktu tersebut
dan Anda perlu meminta kode baru.
</p>
<h3>Fakta Penting dalam Artikel</h3>
<p>
Penelitian menunjukkan bahwa <strong>80 persen kecelakaan lalu lintas</strong>
disebabkan oleh faktor kelalaian pengemudi, bukan kerusakan mekanis.
Data ini menjadi dasar kebijakan keselamatan berkendara nasional.
</p>Simpan dan muat ulang Chrome. Teks yang dibungkus elemen <strong> tampil dalam cetakan tebal yang langsung menarik perhatian pembaca di antara teks biasa di sekitarnya. Buka Developer Tools dengan F12, klik tab Elements, dan klik pada salah satu elemen <strong>. Di panel Computed di sebelah kanan, Anda akan melihat bahwa nilai font-weight untuk elemen tersebut adalah bold yang diterapkan oleh user agent stylesheet. Amati bagaimana ketebalan teks tersebut secara natural menarik mata pembaca ke bagian yang paling krusial dari setiap paragraf. Ini adalah tujuan semantik yang sesungguhnya dari <strong>: memandu perhatian pembaca ke informasi yang paling penting. Verifikasi: teks dalam ketiga elemen <strong> tampil tebal dan secara visual menonjol dari teks di sekitarnya.
Mempraktikkan Elemen em dan Memahami Perbedaannya dari strong
Elemen <em> memberikan penekanan dengan intonasi pada teks, dan perbedaannya dari <strong> menjadi jelas ketika Anda membayangkan bagaimana kalimat tersebut akan dibacakan keras. Teks dalam <em> adalah kata atau frasa yang akan diberi tekanan suara lebih dalam percakapan lisan, mengubah nuansa atau makna kalimat secara keseluruhan. Pada langkah ini Anda akan mempraktikkan <em> dalam konteks penekanan intonasi dan membandingkannya secara berdampingan dengan penggunaan <strong> agar perbedaan keduanya terasa nyata dan bukan sekadar teori.
Tambahkan bagian berikut ke dalam <body> file teks-dasar.html sebelum </body>:
<h2>Contoh Penggunaan Elemen em</h2>
<h3>Penekanan Intonasi yang Mengubah Nuansa Kalimat</h3>
<p>
Dengan penekanan pada kata pertama:
<em>Saya</em> yang seharusnya menyelesaikan laporan itu, bukan orang lain.
</p>
<p>
Dengan penekanan pada kata tengah:
Saya yang seharusnya <em>menyelesaikan</em> laporan itu, bukan hanya memulainya.
</p>
<h3>Istilah Asing atau Teknis dalam Konteks Penekanan</h3>
<p>
Konsep yang perlu Anda pahami di sini adalah <em>semantik</em>,
yaitu makna yang terkandung dalam struktur kode, bukan sekadar tampilannya.
</p>
<h3>Perbandingan strong dan em Berdampingan</h3>
<p>
Gunakan <strong>strong</strong> ketika teks memiliki kepentingan atau urgensi tinggi
yang perlu disampaikan kepada semua pembaca tanpa terkecuali.
</p>
<p>
Gunakan <em>em</em> ketika teks mendapat tekanan intonasi
yang mengubah cara kalimat dipahami secara nuansa atau makna.
</p>
<p>
Gunakan <strong><em>kedua elemen sekaligus</em></strong> ketika teks
memiliki kepentingan tinggi sekaligus perlu mendapat penekanan intonasi.
</p>Simpan dan muat ulang Chrome. Perhatikan tampilan visual masing masing elemen: teks dalam <em> tampil miring, teks dalam <strong> tampil tebal, dan teks dalam kombinasi keduanya tampil miring sekaligus tebal. Yang lebih penting dari tampilan visual adalah memperhatikan konteks penggunaan keduanya: <strong> digunakan untuk informasi yang penting bagi semua pembaca, sementara <em> digunakan untuk penekanan yang mengubah cara kalimat diintonasikan. Buka Developer Tools dan periksa elemen <em> di panel Computed untuk melihat bahwa nilainya adalah font-style: italic dari user agent stylesheet. Verifikasi: teks dalam <em> tampil miring, teks dalam <strong> tampil tebal, dan kombinasi keduanya tampil miring sekaligus tebal.
Mempraktikkan Elemen span sebagai Wadah Inline Netral
Elemen <span> adalah elemen yang paling abstrak di antara kelima elemen dalam artikel ini karena ia tidak memiliki tampilan bawaan maupun makna semantik bawaan. Kegunaannya sepenuhnya bergantung pada atribut yang diberikan kepadanya, paling umum adalah atribut class yang kemudian ditargetkan oleh CSS. Pada langkah ini Anda akan mempraktikkan penggunaan <span> dengan menambahkan atribut style secara langsung untuk memberikan gaya inline sementara, sehingga Anda bisa melihat efek visualnya tanpa harus membuat file CSS terpisah. Perlu diketahui bahwa penggunaan atribut style secara langsung seperti ini disebut "inline style" dan dalam praktik profesional sebaiknya dihindari karena sulit dipelihara, namun untuk tujuan pembelajaran dan demonstrasi dalam artikel ini cara ini memadai untuk menunjukkan bagaimana <span> bekerja.
Tambahkan bagian berikut ke dalam <body> file teks-dasar.html sebelum </body>:
<h2>Contoh Penggunaan Elemen span</h2>
<h3>span untuk Menargetkan Sebagian Teks dengan Gaya Visual</h3>
<p>
Harga produk ini adalah
<span style="color: green; font-weight: bold;">Rp 150.000</span>
dan berlaku hingga akhir bulan ini.
</p>
<p>
Status pesanan Anda saat ini adalah
<span style="color: orange;">sedang diproses</span>.
Kami akan mengirimkan notifikasi ketika status berubah.
</p>
<h3>span versus strong: Kapan Menggunakan Mana</h3>
<p>
Gunakan <span style="font-weight: bold;">span dengan style tebal</span>
ketika Anda hanya menginginkan teks tebal secara visual
tanpa makna kepentingan atau urgensi apapun.
</p>
<p>
Gunakan <strong>strong</strong> ketika teks tersebut memang
penting secara konten dan perlu disampaikan dengan bobot semantik
kepada screen reader dan mesin pencari.
</p>
<h3>span dengan Atribut class untuk Penggunaan Profesional</h3>
<p>
Dalam praktik nyata dengan file CSS terpisah, Anda akan menulis
<span class="teks-harga">teks harga</span> dan
<span class="teks-status">teks status</span>
lalu mendefinisikan tampilannya di file CSS, bukan menggunakan
atribut style langsung di HTML.
</p>Simpan dan muat ulang Chrome. Perhatikan bahwa teks harga tampil hijau dan tebal, sementara teks status tampil oranye, semuanya dalam konteks kalimat yang mengalir normal tanpa memulai baris baru. Inilah keunggulan elemen inline: ia memengaruhi tampilan teks tertentu tanpa mengganggu alur kalimat. Buka Developer Tools, klik pada elemen <span> pertama, dan perhatikan di panel Elements bahwa tidak ada gaya bawaan dari user agent stylesheet untuk <span> selain yang Anda berikan melalui atribut style. Ini membuktikan bahwa <span> sendiri tidak memiliki tampilan bawaan apapun. Verifikasi: teks harga tampil hijau tebal dan teks status tampil oranye, keduanya tetap mengalir dalam kalimat tanpa memulai baris baru.
Menyusun Halaman Artikel Final yang Menggunakan Semua Elemen secara Terpadu
Langkah terakhir adalah menyusun dokumen HTML yang merupakan simulasi artikel nyata, menggabungkan semua elemen yang telah dipelajari dalam satu dokumen yang koheren, terstruktur dengan benar, dan menerapkan setiap elemen pada konteks yang paling tepat. Gantikan seluruh isi file teks-dasar.html dengan kode final berikut yang merupakan artikel pendek tentang cara merawat tanaman hias:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Panduan Merawat Tanaman Hias di Rumah</title>
</head>
<body>
<h1>Panduan Merawat Tanaman Hias di Rumah</h1>
<p>
Merawat tanaman hias tidak harus rumit. Dengan memahami
kebutuhan dasar setiap tanaman, siapapun dapat memiliki
tanaman yang sehat dan tumbuh subur di dalam rumah.
</p>
<h2>Kebutuhan Cahaya</h2>
<p>
Setiap tanaman memiliki kebutuhan cahaya yang berbeda.
<strong>Letakkan tanaman di dekat jendela yang mendapat cahaya alami</strong>
setidaknya empat jam sehari untuk sebagian besar tanaman hias
dalam ruangan.
</p>
<p>
Tanaman seperti <em>monstera</em> dan <em>pothos</em>
toleran terhadap cahaya rendah, sementara kaktus dan sukulen
membutuhkan cahaya penuh sepanjang hari.
</p>
<h2>Jadwal Penyiraman</h2>
<p>
Kesalahan paling umum dalam merawat tanaman adalah
<strong>terlalu banyak menyiram</strong>, bukan terlalu sedikit.
Akar tanaman membutuhkan udara di antara partikel tanah,
dan tanah yang selalu basah akan menyebabkan pembusukan akar.
</p>
<p>
Cara termudah memeriksa kebutuhan air adalah dengan
<em>mencelupkan jari sedalam dua ruas ke dalam tanah</em>.
Jika tanah terasa lembap, tunda penyiraman satu atau dua hari.
Jika kering, segera siram hingga air mengalir dari lubang drainase.
</p>
<h2>Tanaman Rekomendasi untuk Pemula</h2>
<p>
Berikut tiga tanaman yang sangat disarankan untuk pemula
karena perawatannya mudah dan toleransinya tinggi:
</p>
<p>
<strong>Lidah mertua</strong> <em>(Sansevieria)</em>: tahan kekeringan,
dapat tumbuh di cahaya rendah, dan membantu memurnikan udara dalam ruangan.<br>
<strong>Sirih gading</strong> <em>(Epipremnum aureum)</em>: tumbuh cepat,
mudah diperbanyak, dan sangat toleran terhadap berbagai kondisi cahaya.<br>
<strong>Sri rejeki</strong> <em>(Aglaonema)</em>: memiliki daun bermotif indah
dan tumbuh baik di kondisi cahaya rendah hingga sedang.
</p>
<h2>Catatan Penting</h2>
<p>
<strong>Jauhkan tanaman hias dari jangkauan anak kecil dan hewan peliharaan.</strong>
Beberapa tanaman hias yang populer seperti <em>Dieffenbachia</em>
dan <em>Philodendron</em> mengandung senyawa yang beracun
jika tertelan dan dapat menyebabkan iritasi kulit.
</p>
<p>
Informasi lebih lanjut tentang tingkat toksisitas setiap tanaman dapat
diperiksa melalui basis data tanaman
<span style="font-style: italic;">American Society for the Prevention
of Cruelty to Animals</span> yang tersedia secara daring.
</p>
</body>
</html>Simpan dengan Ctrl + S dan muat ulang Chrome. Baca artikel yang ditampilkan dan perhatikan bagaimana setiap elemen formatting berkontribusi pada keterbacaan dan penyampaian informasi: <strong> menyoroti peringatan dan instruksi kritis, <em> memberi tekanan pada nama ilmiah dan istilah khusus, <br> memisahkan setiap tanaman dalam daftar yang masih merupakan satu kesatuan paragraf, dan <span> memberikan gaya miring pada nama organisasi tanpa menambahkan bobot semantik <em>. Buka Developer Tools dan telusuri seluruh pohon DOM untuk memastikan semua elemen berada dalam posisi hierarki yang benar dan tidak ada nesting yang salah urutan. Verifikasi akhir: artikel tampil dengan rapi, semua elemen formatting menampilkan teks sesuai yang diharapkan, dan pohon DOM di Developer Tools menunjukkan struktur yang bersih tanpa anomali.
Verifikasi Akhir dan Parameter Kelayakan
Gunakan tabel berikut untuk memverifikasi pemahaman dan implementasi Anda tentang kelima elemen pemformatan teks dasar HTML. Setiap parameter dapat diperiksa melalui tampilan visual di Chrome dan inspeksi DOM di Developer Tools. Pastikan setiap parameter sudah mencapai kondisi target sebelum melanjutkan ke materi HTML berikutnya.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Pemisahan paragraf konten | Paragraf dipisahkan menggunakan beberapa br berturut turut atau baris kosong di kode sumber | Setiap unit teks yang merupakan satu paragraf dibungkus elemen p tersendiri; jarak vertikal antar paragraf dihasilkan oleh margin bawaan elemen p |
| Penggunaan elemen br | br digunakan secara bebas untuk membuat jarak vertikal atau memisahkan blok konten apapun | br hanya digunakan di dalam elemen p ketika baris baru adalah bagian integral dari makna konten seperti dalam puisi, alamat, atau lirik lagu |
| Pemilihan antara strong dan tampilan tebal visual | Elemen strong digunakan setiap kali ingin teks tampil tebal tanpa mempertimbangkan makna semantik kepentingan | strong digunakan hanya ketika teks memang memiliki kepentingan kuat, urgensi, atau keseriusan; kebutuhan teks tebal murni visual diselesaikan dengan CSS |
| Pemilihan antara em dan span | Elemen em dan span digunakan secara bergantian tanpa mempertimbangkan perbedaan semantiknya | em digunakan untuk penekanan intonasi yang mengubah nuansa kalimat; span digunakan untuk menargetkan teks secara visual atau programatik tanpa menambahkan makna semantik |
| Nesting elemen inline dalam p | Elemen inline seperti strong dan em ditempatkan di luar elemen p atau nestingnya salah urutan | Semua elemen inline berada di dalam elemen blok yang sesuai; elemen yang dibuka lebih dalam ditutup terlebih dahulu sebelum elemen pembungkusnya ditutup |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Saya menulis teks dengan banyak spasi dan baris baru di VS Code namun di browser semuanya menjadi satu baris. Bagaimana cara menampilkan teks persis seperti yang saya ketik termasuk semua spasi dan baris barunya?
Perilaku yang Anda alami adalah whitespace collapsing yang merupakan perilaku bawaan semua elemen HTML kecuali satu. Jika Anda membutuhkan teks yang ditampilkan persis seperti yang ditulis termasuk semua spasi berurutan dan baris baru, gunakan elemen <pre> yang merupakan singkatan dari "preformatted text". Elemen ini dirancang khusus untuk konten yang memerlukan preservasi whitespace, paling umum digunakan untuk menampilkan kode program, output terminal, atau teks ASCII art. Teks dalam <pre> juga akan ditampilkan dengan font monospace secara bawaan. Jika Anda membutuhkan whitespace preserved namun dengan font normal, Anda bisa menambahkan CSS white-space: pre atau white-space: pre-wrap pada elemen paragraf biasa. Nilai pre-wrap mempertahankan whitespace namun tetap membungkus teks sesuai lebar kontainer, sementara pre tidak membungkus teks sama sekali sehingga bisa menyebabkan teks keluar dari batas kontainer jika terlalu panjang.
2. Apakah ada perbedaan antara elemen strong dengan elemen b, dan antara elemen em dengan elemen i? Kapan saya harus menggunakan masing masing?
Perbedaannya adalah pada bobot semantik yang dibawa oleh masing masing elemen. Elemen <strong> menyatakan kepentingan, urgensi, atau keseriusan yang tinggi secara semantik, sementara elemen <b> hanya menyatakan bahwa teks perlu dibedakan secara visual tanpa bobot kepentingan yang sama. Spesifikasi HTML5 menyebut <b> untuk kasus seperti kata kunci dalam ringkasan teks, nama produk dalam ulasan, atau teks yang dibuat menonjol karena konvensi tanpa ada urgensi khusus. Demikian pula, <em> menyatakan penekanan intonasi yang mengubah makna kalimat, sementara <i> digunakan untuk teks dalam konteks alternatif seperti istilah teknis, kata dalam bahasa asing, nama kapal, atau judul karya yang dicetak miring berdasarkan konvensi tipografi tanpa penekanan intonasi. Panduan praktisnya: jika Anda ragu antara <strong> dan <b>, tanyakan apakah teks itu mengandung urgensi atau kepentingan yang perlu disampaikan kepada screen reader. Jika ya, gunakan <strong>. Jika tidak, <b> atau bahkan CSS mungkin lebih tepat.
3. Saya ingin membuat teks tertentu tampil dengan warna berbeda di dalam paragraf. Haruskah saya menggunakan span atau ada elemen HTML khusus untuk warna teks?
Tidak ada elemen HTML yang secara khusus dirancang untuk mengubah warna teks. Warna teks adalah sepenuhnya urusan CSS, bukan HTML. Cara yang benar adalah menggunakan elemen <span> dengan atribut class yang kemudian ditargetkan oleh aturan CSS. Misalnya, Anda memberi class="teks-merah" pada <span> yang menampung teks yang ingin berwarna merah, lalu di file CSS Anda mendefinisikan .teks-merah { color: red; }. Untuk keperluan demonstrasi atau prototipe cepat, Anda bisa menggunakan atribut style secara langsung seperti <span style="color: red;">, namun ini tidak disarankan untuk kode produksi karena menyulitkan pemeliharaan: jika Anda ingin mengubah warna tersebut di kemudian hari, Anda harus mencari dan mengubah setiap atribut style secara satu per satu di seluruh dokumen, sementara dengan CSS terpisah Anda cukup mengubah satu aturan CSS dan seluruh elemen yang menggunakan class tersebut akan berubah secara otomatis.
4. Halaman saya menampilkan teks yang seharusnya tebal namun tidak tampil tebal di browser. Saya sudah menggunakan elemen strong. Apa yang mungkin salah?
Ada beberapa kemungkinan penyebab yang perlu diperiksa secara berurutan. Pertama, periksa apakah elemen <strong> sudah ditutup dengan benar menggunakan </strong>. Jika closing tag tidak ada, teks di luar yang seharusnya normal mungkin malah ikut tampil tebal, atau sebaliknya, teks dalam <strong> tidak tampil tebal karena browser kesulitan menentukan cakupan elemen. Periksa di panel Elements Developer Tools untuk melihat apakah elemen <strong> terbentuk dengan benar dalam pohon DOM. Kedua, periksa apakah ada CSS yang menimpa tampilan bawaan <strong>. Jika ada aturan CSS seperti strong { font-weight: normal; } atau aturan yang mengeset font-weight pada elemen induk, tampilan tebal bisa tertimpa. Di panel Styles Developer Tools, periksa apakah ada aturan CSS yang dicoret dengan garis menunjukkan bahwa aturan tersebut ditimpa oleh aturan lain. Ketiga, pastikan font yang digunakan pada halaman tersebut memang memiliki varian tebal dalam file font-nya, karena beberapa font dekoratif tidak memiliki varian bold dan browser akan melakukan "faux bold" yang hasilnya bisa berbeda dari yang diharapkan.
Kesimpulan dan Rencana Aksi
Anda kini telah menguasai lima elemen pemformatan teks dasar HTML yang membentuk tulang punggung pengelolaan konten teks dalam halaman web: elemen <p> untuk membungkus paragraf, elemen <br> untuk baris baru yang bermakna, elemen <strong> untuk penekanan kepentingan, elemen <em> untuk penekanan intonasi, dan elemen <span> sebagai wadah inline netral yang dapat ditargetkan CSS dan JavaScript. Yang lebih penting dari sekadar mengetahui cara menuliskan kelima elemen tersebut, Anda kini memahami prinsip yang mendasari pemilihan antara satu elemen dengan elemen lainnya: tampilan visual adalah urusan CSS, sementara pilihan elemen HTML harus didasarkan pada makna semantik yang ingin disampaikan. Prinsip ini adalah salah satu fondasi terpenting dari pengembangan web modern, dan menginternalisasinya sejak awal akan membuat kode HTML yang Anda tulis tidak hanya tampil benar secara visual namun juga bermakna bagi mesin pencari, teknologi bantu, dan pengembang lain yang membaca kode Anda.
Sebagai rencana aksi berikutnya, Anda disarankan untuk mulai menjelajahi elemen teks HTML lainnya yang melengkapi kelima elemen yang baru dipelajari. Pelajari elemen <blockquote> untuk kutipan panjang yang bersumber dari sumber eksternal, elemen <cite> untuk menyebutkan nama sumber atau karya yang dikutip, elemen <abbr> dengan atribut title untuk mendefinisikan singkatan secara semantik, dan elemen <mark> untuk menandai teks yang relevan dalam konteks pencarian atau referensi. Selain itu, mulailah bereksperimen dengan menerapkan CSS dasar pada elemen yang sudah Anda pelajari, khususnya properti font-size, color, font-weight, dan line-height pada elemen <p> menggunakan atribut class dan elemen <span>. Pengalaman menggabungkan HTML semantik dengan CSS untuk presentasi visual adalah inti dari kemampuan membangun halaman web, dan setiap latihan yang Anda lakukan mulai saat ini akan membangun intuisi yang semakin kuat tentang alat mana yang tepat untuk kebutuhan mana.
Ditulis dan diedit oleh Ahmad Ismail Al Malik